<template>
    <div class="first-page-wrapper">
        <div class="first-page-top">
            <indexTop></indexTop>
        </div>
        <div class="empty-box" style="height: 10px;width: 100%"></div>
        <div class="data-screen">
            <div class="data-tag-name">
                <el-tag type="success">传感器数据</el-tag>
            </div>
<!--            <div class="data-value">-->
<!--                <itemDisplay v-for="(item,index) in itemValue" :key="index">-->
<!--                    <p slot="temScreen" @click="optionsItems(index)">{{item.itemName}}</p>-->
<!--                    <p slot="temValue">{{item.currentValue}}</p>-->
<!--                </itemDisplay>-->
<!--            </div>-->
            <div class="wrapper-box">
                <div class="first-top">
                    <div class="tem-box" @click="itemNumber = 0">
                        <div class="top-tem">
                            <itemDisplay>
                                <p slot="temScreen">上层温度</p>
                                <p slot="temValue">20°C</p>
                            </itemDisplay>
                        </div>
                        <div class="under-tem">
                            <itemDisplay>
                                <p slot="temScreen">下层温度</p>
                                <p slot="temValue">15°C</p>
                            </itemDisplay>
                        </div>
                    </div>
                    <div class="ox-box" @click="itemNumber = 1">
                        <div class="top-ox">
                            <itemDisplay>
                                <p slot="temScreen">上层溶解氧</p>
                                <p slot="temValue">20%</p>
                            </itemDisplay>
                        </div>
                        <div class="under-ox">
                            <itemDisplay>
                                <p slot="temScreen">下层溶解氧</p>
                                <p slot="temValue">15%</p>
                            </itemDisplay>
                        </div>
                    </div>
                </div>
                <div class="second-under">
                    <div class="salt-box" @click="itemNumber = 3">
                        <div class="top-salt">
                            <itemDisplay>
                                <p slot="temScreen">上层盐度</p>
                                <p slot="temValue">2%</p>
                            </itemDisplay>
                        </div>
                        <div class="under-salt">
                            <itemDisplay>
                                <p slot="temScreen">下层盐度</p>
                                <p slot="temValue">1%</p>
                            </itemDisplay>
                        </div>
                    </div>
                    <div class="ph-box" @click="itemNumber = 2">
                        <itemDisplay>
                            <p slot="temScreen">PH</p>
                            <p slot="temValue">7</p>
                        </itemDisplay>
                    </div>
                </div>
            </div>
            <div class="time-input">
                <div class="block">
                    <el-date-picker
                            v-model="value1"
                            type="datetime"
                            placeholder="选择开始时间">
                    </el-date-picker>
                    <el-date-picker
                            v-model="value2"
                            type="datetime"
                            placeholder="选择结束时间" @blur="findData">
                    </el-date-picker>
<!--                    <el-date-picker-->
<!--                            v-model="value1"-->
<!--                            type="datetimerange"-->
<!--                            range-separator="至"-->
<!--                            start-placeholder="数据开始日期"-->
<!--                            end-placeholder="数据结束日期" style="width: 350px" @blur="findData">-->
<!--                    </el-date-picker>-->
                </div>
            </div>
            <div class="data-value-charts">
                <tem v-if="itemNumber === 0" ref="temChild"></tem>
                <ox v-if="itemNumber === 1" ref="oxChild"></ox>
                <PH v-if="itemNumber === 2" ref="phChild"></PH>
                <salt v-if="itemNumber === 3" ref="saltChild"></salt>
                <NH v-if="itemNumber === 4" ref="nhChild"></NH>
                <mix v-if="itemNumber === 5" ref="mixChild"></mix>
<!--                <PH v-if="itemNumber === 6"></PH>-->
            </div>
            <div style="margin-left: 10px">
                <temOne v-if="itemNumber === 0" ref="temChild"></temOne>
                <ox-one v-if="itemNumber === 1" ref="oxChild"></ox-one>
                <saltOne v-if="itemNumber === 3" ref="saltChild"></saltOne>
            </div>
        </div>
    </div>
</template>

<script>
    import indexTop from "./indexTop";
    import itemDisplay from "../../components/common/itemDisplay";
    // import timerSelect from "./timerSelect";
    import tem from "../mainData/tem";
    import temOne from "../mainData/temOne";
    import salt from "../mainData/salt";
    import saltOne from "../mainData/saltOne";
    import ox from "../mainData/ox";
    import oxOne from "../mainData/oxOne";
    import PH from "../mainData/PH";
    import NH from '../mainData/NH'
    import mix from "../mainData/mix";

    export default {
        name: "firstPage",
        data(){
            return{
                itemNumber:0,
                startTime:'',
                endTime:'',
                value1:'',
                value2:'',
                itemValue:[
                    {itemName:'温度',currentValue:this.$store.state.totalInfor.temperature},
                    {itemName:'溶解氧',currentValue:this.$store.state.totalInfor.dissolvedOxygen},
                    {itemName:'PH值',currentValue:this.$store.state.totalInfor.phValue},
                    {itemName:'盐度',currentValue:this.$store.state.totalInfor.salinity},
                    {itemName:'氨氮浓度',currentValue:this.$store.state.totalInfor.anconcentration},
                    {itemName:'浊度',currentValue:this.$store.state.totalInfor.turbidity},
                    // {itemName:'PH值',currentValue:"8"},
                ]
            }
        },
        components:{
            indexTop,
            itemDisplay,
            tem,
            temOne,
            salt,
            saltOne,
            ox,
            oxOne,
            PH,
            mix,
            NH
        },
        created() {

        },
        methods:{
            p(s) {
                return s < 10 ? '0' + s : s
            },
            optionsItems(options){
                this.itemNumber = options
            },
            findData(data){
                let a = [this.value1,this.value2];
                // this.$store.state.timeSlot = a[0]
                let b = a[0];
                let c = a[1];
                const d = new Date(b)
                const e = new Date(c)
                const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
                const resTime = this.p(d.getHours()) + ':' + this.p(d.getMinutes()) + ':' + this.p(d.getSeconds())
                const resDate1 = e.getFullYear() + '-' + this.p((e.getMonth() + 1)) + '-' + this.p(e.getDate())
                const resTime1 = this.p(e.getHours()) + ':' + this.p(e.getMinutes()) + ':' + this.p(e.getSeconds())
                // console.log(resDate + " " + resTime)
                let dd = resDate + " " + resTime
                this.$store.state.startTime = dd;
                // console.log(resDate1 + " " + resTime1)
                let ee = resDate1 + " " + resTime1;
                this.$store.state.endTime = ee;
                // console.log('http://49.232.131.98/mqtt/data/list/'+ dd +'/'+ ee);
                this.$axios.get('http://49.232.131.98/mqtt/data/list/'+ dd +'/'+ ee).then((res) => {
                    // console.log(res);
                    let a = res.data.data.data;
                    // console.log(a)
                    var timeAr = [];
                    var temAr = [];
                    var oxAr = [];
                    var phAr = [];
                    var saltAr = [];
                    var nhAr = [];
                    var zhuoAr = [];
                    for(var i=0;i<a.length;i++){
                        // this.$store.state.temArr.push(a[i].temperature)
                        // this.$store.state.oxArr.push(a[i].dissolvedOxygen)
                        // this.$store.state.phArr.push(a[i].phValue)
                        // this.$store.state.saltArr.push(a[i].salinity)
                        temAr.push(a[i].temperature)
                        oxAr.push(a[i].dissolvedOxygen)
                        phAr.push(a[i].phValue)
                        saltAr.push(a[i].salinity)
                        nhAr.push(a[i].anconcentration)
                        zhuoAr.push(a[i].turbidity)
                        timeAr.push(a[i].createTime)
                    }
                    this.$store.state.temArr = temAr
                    this.$store.state.oxArr = oxAr
                    this.$store.state.phArr = phAr
                    this.$store.state.saltArr = saltAr
                    this.$store.state.nhArr = nhAr
                    this.$store.state.zhuoArr = zhuoAr
                    this.$store.state.timeInfor = timeAr;
                    this.$refs.temChild.echartsInit();
                    this.$refs.oxChild.echartsInit();
                    this.$refs.phChild.echartsInit();
                    this.$refs.saltChild.echartsInit();
                    this.$refs.nhChild.echartsInit();
                    this.$refs.mixChild.echartsInit();
                    // this.totalInfor = res
                    // this.echartsInit()
                }).catch((err) => {

                    console.log(err)

                });
                // this.$store.state.timeSlot = a[0]

            },
            findCurrent(){
                this.$axios.get('http://49.232.131.98/mqtt/data/new_val').then((res) => {
                    this.$store.state.totalInfor = res.data.data.data;
                }).catch((err) => {

                    console.log(err)

                })
            }
        },
        mounted() {
            this.findCurrent();
            // console.log(this.$store.state.totalInfor)
            setInterval(this.findCurrent,10000)
        }
    }
</script>

<style scoped lang="less">
    .first-page-wrapper{
        width: 375px;
        /*height: 667px;*/
        /*background-image: url("../../assets/back/firstPageBack.jpg");*/
        /*background-size: cover;*/
        background-color: #eeeeee;
        .first-page-top{
            height: 50px;
            width: 375px;
            background-color: #e6c6c6;
            position: fixed;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: green;
            font-size: 16px;
            font-weight: bold;
            z-index: 9999;
        }
        .data-screen{
            margin-top: 50px;
            .data-tag-name{

            }
            .data-value{
                width: 375px;
                display: flex;
                flex-flow: row wrap;
            }
            .data-value-charts{
                display: flex;
                justify-content: center;
            }
            .time-input{
                margin-top: 20px;
            }
        }
    }
    .block{
        display: flex;
        justify-content: center;
    }
    .wrapper-box{
        /*display: flex;*/
        /*flex-flow: column nowrap;*/
        .first-top{
            display: flex;
            flex-flow: row nowrap;
            .tem-box{
                flex: 1;
                border: 2px solid #c92525;
                border-right: none;
                border-left: none;
            }
            .ox-box{
                flex: 1;
                border: 2px solid #c92525;
                border-right: none;
            }
        }
        .second-under{
            display: flex;
            flex-flow: row nowrap;
            .salt-box{
                flex: 1;
                border: 2px solid #c92525;
                border-right: none;
                border-left: none;
            }
            .ph-box{
                flex: 1;
                border: 2px solid #c92525;
                border-right: none;
            }
        }

    }
</style>
